<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/Ui/layui-v2.6.4/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/Ui/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/admin/css/login.css}">
    <link rel="stylesheet" th:href="@{/admin/css/index.css}">
    <style>
        body{
            background: #227b79 !important;
        }
    </style>
</head>
<body>
<div style="height: 80px;width:100%;"></div>
<div th:include="blog/common::top"></div>
<div class="row">
    <div class="col-xs-4 col-xs-offset-4 formItems">
        <div style="margin-top: 10px;text-align: center">
            <span class="fontUser">修改密码</span>
        </div>
        <form class="layui-form" action="/updatePwd" method="post">
            <div class="layui-form-item ">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-inline">
                    <input type="text" required name="newPwd"  lay-reqtext="用户名是必填项，岂能为空？"
                           placeholder="新密码" autocomplete="off" class="layui-input input" id="newPwd" onfocus="f1()">
                </div>
            </div>
            <input type="text" hidden="hidden" th:value="${session.id}" name="userId">
            <div class="layui-form-item">
                <label class="layui-form-label">请确认</label>
                <div class="layui-input-inline">
                    <input type="text" required name="reNewPwd" placeholder="确认新密码"
                           autocomplete="off" class="layui-input input" id="reNewPwd" onblur="f()">
                </div>
            </div>
            <div id="errMsg" style="color: red"></div>

            <div class="layui-form-item ">
                <label class="layui-form-label">原密码</label>
                <div class="layui-input-inline">
                    <input type="text" required name="orgPwd"  lay-reqtext="用户名是必填项，岂能为空？"
                           placeholder="原密码" autocomplete="off" class="layui-input input">
                </div>
            </div>
            <div th:text="${errMsg}" style="color: red"></div>

            <div style="text-align: center">
                <input type="submit" class="btn btn-info" style="width: 100px">
            </div>
        </form>

    </div>
</div>

<script th:src="@{/Ui/layui-v2.6.4/layui/layui.js}"></script>
<script th:src="@{/Ui/bootstrap/js/bootstrap.js}"></script>
<script>
    function f() {
      const newPwd = document.getElementById("newPwd").value;
      const reNewPwd = document.getElementById("reNewPwd").value;
      if (newPwd !== reNewPwd){
          document.getElementById("newPwd").value = "";
          document.getElementById("reNewPwd").value = "";
          document.getElementById("errMsg").innerText = "两次密码不一致"
      }
    }
    function f1() {
        document.getElementById("errMsg").innerText='';
    }

</script>
</body>
</html>